import { NButton, NCard, NDynamicTags, NInput, NModal, NSpace, NTag } from "naive-ui";
import { defineComponent, nextTick, ref } from "vue";
import useEditModel from "@/hooks/editModel"
import useHttpMessage from "@/hooks/oftenattr"
import Mypage from "@/components/mypage";
import { nanoid } from "nanoid";



export default defineComponent({
    name: "tagselect",
    props: {
        // 关闭钩子
        close: {
            type: Function,
            default: null,
        },
        // 默认选中的数据,是个ref类型的数据，必填
        defaultList: {
            type: Object,
            default: ref([]),
        },
    },
    setup({ close, defaultList, }, { expose }) {
        /**********************************************************************************
        * 复用公共的钩子函数区域
        ***********************************************************************************/
        const { http, message } = useHttpMessage()
        const {
            showModel,
            handleInit,
            handleClose,
            handleReset,
            formValue,
            formRef,
            title,
            editType,
            resultText,
            loading,
        } = useEditModel(null, null, "", close)
        expose({ handleInit, handleClose, handleReset })
        /**********************************************************************************
        * 自定义函数和属性区域
        ***********************************************************************************/
        // 总数
        const total = ref(0)
        // 分页组件
        const pageRef = ref<any>(null)
        // 搜索关键字
        const searchText = ref("")
        // 标签列表
        const taglist = ref<Array<any>>([])
        // 删除标签
        const handleCloseTag = (row: any, index: number) => {
            // 首先将已选列表中的数据删除
            defaultList?.value.splice(index, 1)
            // 然后去待选列表中查询该数据，如果有，置为未选择状态
            const item = taglist.value.find((el) => el.id === row.id)
            if (item) {
                item.checked = false
            }
        }
        // 选定和未选定标签
        const handleChangeTag = (row: any) => {
            nextTick().then(() => {
                if (row.checked) {
                    // 如果是选中状态，遍历已选数据，如果不存在，就添加进去
                    const result = defaultList?.value.find((el: any) => el.id === row.id)
                    if (!result) {
                        defaultList?.value.push(row)
                    }
                } else {
                    // 如果是未选中状态，遍历已选数据，如果已存在，就删除
                    const result = defaultList?.value.findIndex((el: any) => el.id === row.id)
                    if (result !== -1) {
                        defaultList?.value.splice(result, 1)
                    }
                }
            })
        }
        // 手动创建新标签
        const handleCreateTag = (text: string) => {
            // 如果是选中状态，遍历已选数据，如果不存在，就添加进去
            const result = defaultList?.value.find((el: any) => el.name === text)
            if (!result) {
                defaultList?.value.push({ id: nanoid(), name: text, label: text })
            } else {
                message.error(`标签：${text}，已经存在`)
            }
            return false
        }
        // 点击搜索
        const handleSearch = () => {
            pageRef.value?.changePage({ page: 1 })
        }
        // 获取数据
        const getTableDataFunc = (page: number, pageSize: number) => { }
        /**********************************************************************************
        * 渲染html区域
        ***********************************************************************************/
        const actionSlot = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        const defaultSlot = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={{ padding: "10px", width: "600px", }}>
                <NSpace size={10} class="items-center">
                    <span>已选标签</span>
                    <NDynamicTags value={[]} onCreate={handleCreateTag} />
                </NSpace>
                <div class="w-full min-h-30px flex flex-wrap">
                    {defaultList?.value.map((item: any, index: number) => {
                        return <NTag class="m-2" bordered={false} type={"success"} closable={true} checkable={false} onClose={() => handleCloseTag(item, index)}>{item.name}</NTag>
                    })}
                </div>
            </NCard>
            <NCard contentStyle={{ padding: "10px", width: "600px", }}>
                <NSpace size={10} class="items-center">
                    <span>待选标签</span>
                    <NInput v-model={[searchText.value, "value"]} clearable={true} placeholder={"请输入搜索关键字"} size={"small"} />
                    <NButton onClick={handleSearch} size={"small"}>搜索</NButton>
                </NSpace>
                <div class="w-full min-h-30px flex flex-wrap">
                    {taglist?.value.map((item: any, index: number) => {
                        return <NTag class="m-2" closable={false} checkable={true} onUpdateChecked={() => handleChangeTag(item)}>{item.name}</NTag>
                    })}
                </div>
                <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc} />
            </NCard>
        </div>)
        /**********************************************************************************
        * 主渲染区域
        ***********************************************************************************/
        return () => (<NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val}
            preset={"dialog"} title={title.value} showIcon={false}
            loading={loading.value}
            v-slots={{ action: actionSlot, default: defaultSlot, }}>
        </NModal>)
    },
})